<html ng-app="myApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Getting Started With ngGrid Example</title>
    <link rel="stylesheet" type="text/css" href="../../css/plugins/ui-grid.min.css" />
    <script type="text/javascript" src="../../js/bases/jquery-1.12.2.min.js"></script>
    <script type="text/javascript" src="../../js/bases/angular.min.js"></script>
    <script type="text/javascript" src="../../js/plugins/ui-grid.min.js"></script>

    <style>
        .gridStyle {
            border: 1px solid rgb(212,212,212);
            width: 400px;
            height: 300px
        }
    </style>

</head>
<body ng-controller="MyCtrl">

    <input type="text" ng-model="city" placeholder="Enter a city" />

    <my-test ng-model="city" ></my-test>
    <span my-test="exp" ng-model="city"></span>
    <!-- directive: my-test exp -->
    <span ng-model="city"></span>

    <my-attr info="naomi"></my-attr>

    <script>
    var app = angular.module('myApp', []);
    app.controller('MyCtrl', function($scope) {


    });

    app.directive('myTest', function () {
        return {
            restrict: 'ACEM',
            require:'^ngModel',
            scope:{
                ngModel:'='
            },
            template: '<div><h4>Weather for {{ngModel}}</h4></div>'

        };
    });
</script>
</body>
</html>


